<template>
  <div class="top-nav">
    <a href="./recyle">
      <img src="../../../assets/imgs/recycle/recycle_img.png" alt="回收首页">
    </a>
    <div class="form-view">
      <input type="text" v-model="inputValue" placeholder="看看有什么可以回收的">
      <div class="btn-clear" @click="clearInput" v-if="inputValue"></div>
      <div class="btn-search" @click="handleSearch"></div>
    </div>
    <div class="set-items">
      <div class="item" v-for="(item, index) in items" :key="index">
        <i class="iconfont" :class="item.icon"></i>
        <span>{{ item.text }} |</span>
      </div>
    </div>
    <!-- 扫码回收区域（统一包裹以便统一处理鼠标事件和定位） -->
    <div class="qcode-container" @mouseenter="showDropdown = true" @mouseleave="showDropdown = false">
      <div class="qcode-recycle">扫码回收</div>
      <i class="iconfont icon-xiangxiajiantou" :class="{ 'rotate-arrow': showDropdown }"></i>

      <!-- 下拉框 - 现在相对于qcode-container定位 -->
      <div class="dropdown" v-show="showDropdown" @mouseenter="showDropdown = true" @mouseleave="showDropdown = false">
        <div class="qcode-img"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const inputValue = ref('');
const showDropdown = ref(false); // 控制下拉框显示和箭头旋转

const clearInput = () => {
  inputValue.value = '';
};

const handleSearch = () => {
  console.log('搜索内容：', inputValue.value);
  // 实际搜索逻辑
};

const items = [
  { text: '回收车', icon: 'icon-huishouche' },
  { text: '回收券', icon: 'icon-youhuiquan' },
  { text: '我的回收单', icon: 'icon-ic_personal_work_diary' },
];
</script>

<style scoped lang="scss">
.top-nav {
  height: 80px;
  padding: 15px 30px;
  width: 100%;
  background-color: rgb(245, 248, 253);
  display: flex;
  align-items: center;
  position: relative;

  a {
    margin-left: 180px;

    img {
      width: 110px;
      height: 34px;
      object-fit: contain;
    }
  }

  .form-view {
    width: 360px;
    height: 36px;
    border-radius: 20px;
    background: #EBEFF5;
    border: 1px solid #e5e5e5;
    margin-left: 35px;
    position: relative;
    display: flex;
    align-items: center;

    input {
      flex: 1;
      height: 30px;
      border: none;
      border-radius: 20px;
      background: #EBEFF5;
      padding: 0 20px;
      outline: none;
      font-size: 14px;
    }

    .btn-clear {
      width: 20px;
      height: 20px;
      background-image: url(//img10.360buyimg.com/paipai/jfs/t1/227819/31/2315/529/6548a380Fdfbffd49/6756d0e6a5efb8db.png);
      background-size: 100% 100%;
      position: absolute;
      right: 72px;
      cursor: pointer;
      transition: opacity 0.2s;

      &:hover {
        opacity: 0.8;
      }
    }

    .btn-search {
      width: 52px;
      height: 36px;
      background-image: url(//img10.360buyimg.com/paipai/jfs/t1/96037/32/40300/1152/6548c71eFf223e280/294fefdde81cef72.png);
      background-size: 100% 100%;
      position: absolute;
      right: 0;
      cursor: pointer;
      transition: opacity 0.2s;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .set-items {
    display: flex;
    margin-left: 30px;

    .item {
      margin-left: 10px;
      color: #666;
      font-size: 14px;
      cursor: pointer;
      transition: color 0.2s;

      &:hover {
        color: #f40;
      }

      i {
        margin-right: 4px;
        font-size: 16px;
      }
    }
  }

  // 扫码回收容器（统一处理鼠标事件和作为下拉框的定位参考）
  .qcode-container {
    display: flex;
    align-items: center;
    margin-left: 35px;
    cursor: pointer;
    position: relative;
  }

  .qcode-recycle {
    color: #666;
    font-size: 14px;
    transition: color 0.2s;

    .qcode-container:hover & {
      color: #f40;
    }
  }

  .icon-xiangxiajiantou {
    margin-left: 6px;
    color: #666;
    font-size: 16px;
    transition: transform 0.3s ease; // 平滑旋转动画
  }

  // 箭头旋转样式
  .rotate-arrow {
    transform: rotate(180deg); // 旋转180度实现倒置
  }

  .dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -8px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;


    .qcode-img {
      width: 140px;
      height: 140px;
      background-image: url('https://img10.360buyimg.com/paipai/jfs/t1/210474/1/37645/12604/654b5b04F07439a10/f065c2ff466ecf89.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      margin: 0 auto;
    }
  }
}
</style>
